<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>订餐系统登录</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="themes/bootstrap/easyui.css"/>
<link rel="stylesheet" type="text/css" href="themes/icon.css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>

<style type="text/css">
	body{
		background: linear-gradient(to right, #EDF4FF, #E1ECFF);
	}
	#loginDiv{
		border: 1px solid #ace;
		margin-top: 160px;
		height:300px;
		border-radius:10px;
		background: linear-gradient(to bottom, #EDF4FF, #E1ECFF);
		box-shadow:5px 5px 3px #E0FEFE;
		text-align: center;
	}
	.form-group .form-control{
        width: 280px;
        margin: 35px auto;
        border-radius: 5px 5px 5px;
     }
     #registerBtn{
     	position: absolute;
     	left:380px;
     	top:420px;
     	text-align: center;
        background-color: #E4EEFF;
        color: black;
        border-radius: 5px;
        cursor: pointer;
     }
     #registerBtn:hover{
        background-color: #8dcde9;
        color: white;
     }
     #registerDiv{
     	position: absolute;
     	left:870px;
     	top:340px;
     	background-color: #E4EEFF;
     	width: 100px;
     	height: 160px;
     	display: none;
     	border-radius: 5px;
     	text-align: center;
     	padding-top: 50px;
     	
     }
</style>
</head>
<script type="text/javascript">
	$(function(){
		//回车触发登录按钮
		$(document).keydown(function(event){ 
			if(event.keyCode==13){ 
			$("#checkBtn").click(); 
			} 
		}); 
		$("input[name=uname]").blur(function(){
			$("#errorMsg").empty();
		});
		
		$("#registerBtn").click(function(){
			$("#registerDiv").show();
		});
		$("#registerDiv").mouseleave(function(){
			$("#registerDiv").hide();
		});
		
		$("#checkBtn").click(function(){
			var uname = $("input[name=uname]").val();
			var upsw = $("input[name=upsw]").val();
			if(uname!=""&&upsw!=""){
				$("#loginForm").prop("action","loginAction");
				$("#loginForm").submit();
			}
		});
		
		$("#cc").hide();
		$("#win").window("close");
		$("#cwin").window("close");
		
		$("#creBtn").click(function(){
			$("#cwin").window("open");
			var mydate = new Date();
			var month = mydate.getMonth()+1;
			var ccreatetime = mydate.getFullYear()+"-"+month+"-"+mydate.getDate();
			$("#ctime").textbox("setValue",ccreatetime);
		})
		//验证

		//注册按钮事件
		$("#reBtn").click(function(){
			$("#win").window("open");
		})
		//验证
		$.extend($.fn.validatebox.defaults.rules, {    
		    equals: {    
		        validator: function(value,param){    
		            return value == $(param[0]).val();    
		        },    
		        message: '两次密码不一致'   
		    },
		
		 Number: {  
		        validator: function (value) {  
		            var reg =/^[0-9]*$/;  
		            return reg.test(value);  
		        },  
		        message: '请输入数字'  
		    }, 
		    
		    phone: {  
		        validator: function (value) {  
		            var reg = /^[0-9]\d{10}$/;  
		            return reg.test(value);  
		        },  
		        message: '电话号码格式不正确'  
		    },
		    loginName: {
		        validator: function (value, param) {
		            return /^[\u4e00-\u9fa5\w_]+$/.test(value);
		        },
		        message: '只允许汉字、英文字母、数字及下划线'
		    },
		     
		});   
	})
	//提交商家注册表单
	function submitForm(){
			$('#ff').form('submit', {    
			    url:'addSellerAction',      
			    success:function(data){    
			        if(data==1){
			        	$.messager.alert('提示','注册成功');  
			        	$("#win").window("close");
			        	$('#ff').form('clear');
			        }else{
							$.messager.alert('提示','该用户名已被注册',"error",function(){	
								$('#ff').form('clear');
							}); 
			        }   
			    }    
			});
        }
	//提交顾客注册表单
        function submitcForm(){
			$('#cff').form('submit', {    
			    url:'customerRegisterAction',      
			    success:function(data){    
			        if(data==1){
			        	$.messager.alert('提示','注册成功');  
			        	$("#cwin").window("close");
			        	$('#cff').form('clear');
			        }else{
							$.messager.alert('提示','该用户名已被注册',"error",function(){	
								$('#cff').form('clear');
							}); 
			        }   
			    }    
			});
        }
function clearcForm(){
	$('#cff').form('clear');
}
function clearsForm(){
	$('#ff').form('clear');
}
</script>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-4 col-md-offset-4">
				<div id="loginDiv">
					<h3><b>订餐登录</b></h3>
	                <form id="loginForm" class="form-group" action="loginAction" method="post">
	                    <input type="text" class="form-control" placeholder="请输入用户名!" title="请输入此字段！" name="uname" autofocus/>
	                    <input type="password" class="form-control" placeholder="请输入密码!" title="请输入此字段！" name="upsw"/>
	                    <p id="errorMsg">${errorMsg }</p>
	                    <input id="checkBtn" type="button" value="确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定" class="btn btn-default btn-sm" style="margin-right: 5px"/>
	                    <input type="reset" value="重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置" class="btn btn-default btn-sm" style="margin-left: 5px"/>   
	                </form>
	                <div id="win" class="easyui-window" title="注册" style="width:400px;height:480px"   
        data-options="collapsible:false,minimizable:false,maximizable:false,draggable:false,resizable:false,modal:true">   
        				<div style="margin:10px 0;"></div>
        				<div>
        <form id="ff"  method="post">
            <div style="margin-bottom:5px">
            <label>账号</label>
                <input id="uname" class="easyui-textbox" name="loguname" style="width:100%" data-options="required:true" validType="loginName">
            </div>
            <div style="margin-bottom:5px">
            <label>密码</label>
                <input id="supsw" class="easyui-validatebox" type="password" name="logupsw" style="width:100%" data-options="required:true">
            </div>
            
            <div style="margin-bottom:5px">
            <label>店名</label>
                <input class="easyui-textbox" name="regsname" style="width:100%" data-options="required:true">
            </div>
            <div style="margin-bottom:5px">
           <label>地址</label>
                <input class="easyui-textbox" name="regsaddress" style="width:100%" data-options="required:true" >
            </div>
            
            <div style="margin-bottom:5px">
           <label>电话</label>
                <input class="easyui-textbox" name="regsphone" style="width:100%" data-options="required:true" validType="phone">
            </div>
            <div style="margin-bottom:5px">
           <label>邮箱</label>
                <input class="easyui-textbox" name="regsemail" style="width:100%" data-options="required:true,validType:'email'">
            </div>
           
            <div style="text-align:center;padding:5px 0">
            <a id="qd" href="javascript:void(0)" class="easyui-linkbutton btn btn-default btn-sm" onclick="submitForm()" style="width:80px">确定</a>
	        <a id="qd" href="javascript:void(0)" class="easyui-linkbutton btn btn-default btn-sm" onclick="clearsForm()" style="width:80px">重置</a>
        </div>
        </form>
        </div>
					</div>  
				<div id="cwin" class="easyui-window" title="注册" style="width:400px;height:480px"   
        data-options="collapsible:false,minimizable:false,maximizable:false,draggable:false,resizable:false,modal:true">   
        				<div style="margin:10px 0;"></div>
        				<div>
        <form id="cff"  method="post">
            <div style="margin-bottom:5px">
            <label>账号</label>
                <input id="uname" class="easyui-textbox" name="uname" style="width:100%" data-options="required:true" validType="loginName">
            </div>
            <div style="margin-bottom:5px">
            <label>密码</label>
                <input id="upsw" class="easyui-validatebox" type="password" name="upsw" style="width:100%" data-options="required:true">
            </div>
            <div style="margin-bottom:5px">
            <label>确认密码</label>
                <input id="reupsw" class="easyui-validatebox" type="password" name="reupsw" style="width:100%" required="required" validType="equals['#upsw']" >
            </div>
            <div style="margin-bottom:5px">
            <label>姓名</label>
                <input class="easyui-textbox" name="cname" style="width:100%" data-options="required:true">
            </div>
            <div style="margin-bottom:5px">
           <label>年龄</label>
                <input class="easyui-textbox" name="cage" style="width:100%" data-options="required:true" validType="Number">
            </div>
            <div style="margin-bottom:5px">
            <label>性别</label>
                <select class="easyui-combobox" name="csex" style="width:100%" editable="false" data-options="required:true">
                	<option value="男" >男</option>
                	<option value="女" >女</option>
                </select>
            </div>
            <div style="margin-bottom:5px">
           <label>电话</label>
                <input class="easyui-textbox" name="cphone" style="width:100%" data-options="required:true" validType="phone">
            </div>
            <div style="margin-bottom:5px">
           <label>邮箱</label>
                <input class="easyui-textbox" name="cemail" style="width:100%" data-options="required:true,validType:'email'">
            </div>
            <div id="cc" style="margin-bottom:5px">
           <label>创建时间</label>
                <input id="ctime" class="easyui-textbox" name="ccreatetime" style="width:100%" data-options="required:true">
            </div>
            <div style="text-align:center;padding:5px 0">
            <a id="cqd" href="javascript:void(0)" class="easyui-linkbutton btn btn-default btn-sm" onclick="submitcForm()" style="width:80px">确定</a>
	        <a id="cqd" href="javascript:void(0)" class="easyui-linkbutton btn btn-default btn-sm" onclick="clearcForm()" style="width:80px">重置</a>
        </div>
        </form>
        </div>
					</div>
					<div id="registerBtn">注&nbsp;册</div>  
				</div>
				
			</div>
		</div>
	</div>
	<div id="registerDiv">
			<input id="creBtn" type="button" value="顾客注册" class="btn btn-default btn-sm">
			<input id="reBtn" type="button" value="商家注册" class="btn btn-default btn-sm"  style="margin-top: 10px;">
	</div> 
</body>
</html>